<template>
  <a-modal
    :open="open"
    :title="$t('user.assignRoles')"
    :confirm-loading="loading"
    :ok-text="$t('common.submit')"
    :cancel-text="$t('common.cancel')"
    @ok="emit('submit')"
    @cancel="emit('update:open', false)"
  >
    <a-transfer
      :target-keys="modelValue"
      :data-source="roleList"
      :titles="[$t('user.availableRoles'), $t('user.assignedRoles')]"
      :render="(item) => item.title"
      :list-style="{ width: 300, height: 400 }"
      @change="handleChange"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import type { TransferProps } from 'ant-design-vue'

defineOptions({
  name: 'AssignRolesModal'
})

// 类型定义
type TransferItem = NonNullable<TransferProps['dataSource']>[number]

// Props定义
withDefaults(defineProps<{
  open: boolean
  modelValue: string[]
  roleList?: TransferItem[] | undefined
  loading?: boolean
}>(), {
  modelValue: () => [],
  roleList: undefined,
  loading: false
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'update:modelValue', value: string[]): void
  (e: 'submit'): void
}>()

// 选择变化
const handleChange = (keys: string[]) => {
  emit('update:modelValue', keys)
}

</script> 